<template>
	<view class="car-count">
		<view  class="car-list">
			<view v-if="carList.length != 0">
				<view class="list" v-for="(itm) in carList" :key="itm.id" @touchstart.prevent="touchstart(itm.id,itm.book_name)" @touchend.prevent="touchend">
					<view class="car-mes centerboth">
						<view class="mes-box">
							<view class="row">
								<view class="g-name line2">{{itm.bookName}}</view>
								<!-- <view class="publisher" style="background-color: '[itm.condition== '8~9成新'? #DC143C': '#BA55D3']';">{{itm.condition}}</view> -->
								
							</view>
							<view class="row">
								<view class="gz-box"><text>{{itm.isbn}}</text></view>
								<view class="publisher"><text>{{itm.publisher}}</text></view>
								<view class="gz-box"><text>{{itm.priceMode}}</text></view>
							</view>
							<view class="price-change-num clearfix">
								<view class="price"><text class="yj-price">{{itm.location}}</text></view>
								<view class="condition" v-if="itm.chengse == '0'" style="background-color: #00FF7F;">8~9成新</view>
								<view class="condition" v-if="itm.chengse == '1'" style="background-color: #87CEEB;">5~7成新</view>
								<view class="condition" v-if="itm.chengse == '2'" style="background-color: #DC143C;">1~4成新</view>
								<view>
									<view class="cut" @click="cut(itm)">
										<u-icon name="minus-circle" color="#aa55ff" size="28"></u-icon>
									</view>
									<view class="amount">{{itm.amount}}</view>
									<view class="add" @click="add(itm)">
										<u-icon name="plus-circle-fill" color="#aa55ff" size="28"></u-icon>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-else>
				<view>您还未选购教材</view>
				<!-- <button @click="open">打开弹窗</button>
				<uni-popup ref="popup" type="bottom">底部弹出 Popup</uni-popup> -->
			</view>
		</view>
		<view class="car-bottom-btn">
			<view>
				<view class="js-btn centerboth">
					<u-button type="primary" @click="Purchase()" text="确定" size="large">匹配</u-button>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	
	export default {
		props: {
			
		},
		data() {
			return {
				carList:[],
				// totalAmount: 0,
				open(){
				   // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				   this.$refs.popup.open('top')
			    }
			}
		},
		onShow() {
			this.getData()
		},
		mounted() {
		},
		created() {

		},
		computed: {
			
		},
		methods: {
			async getData(){
				let vm = this
				
				let header = new Object
				header.Authority = getApp().globalData.Authority
				let res = await getApp().UniRequest('/twohandbook/bookBill/authority/getShopCart','GET','',header)
				vm.carList = res.data.carList
				// console.log('res',vm.carList)
				// let temp = 0
				// vm.carList.forEach(function(val){
				// 	temp += val.amount
				// })
				// vm.totalAmount = temp
			},
			touchstart(id,book_name) {
			　　let vm = this;
			　　clearInterval(this.Loop); //再次清空定时器，防止重复注册定时器
			　　　　this.Loop = setTimeout(function() {
			　　　　　　uni.showModal({
			　　　　　　　　title: '删除',
			　　　　　　　　content: '请问要删除 ' + book_name + " 吗？",
			　　　　　　　　success:async function(res) {
							if(res.confirm){
								let body = new Object
								body.stockId = id
								let header = new Object
								header.Authority = getApp().globalData.Authority
								let res = await getApp().UniRequest('/twohandbook/bookBill/authority/delBook','GET',body,header)
			　　　　　　　　		vm.getData()
			                } else if (res.cancel) {
			　　　　　　　　　　console.log('用户点击取消')
			　　　　　　　　 }
			　　　　　　}
			　　　　});
			　　}.bind(this), 1000);
			},
			touchend() {
			　　clearInterval(this.Loop);
			
			},
			async Purchase(){
				let header = new Object
				header.Authority = getApp().globalData.Authority
				let body = new Object
				body.priceMode="0" ;
				let data = await getApp().UniRequest('/twohandbook/buyBookRecord/authority/buyBook','GET',body,header)
				console.log(data)
			},
			async cut(addToCartVo){
				let vm = this
				let header = new Object
				header.Authority = getApp().globalData.Authority
				let body = new Object
				body.redisId = addToCartVo.id
				let res = await getApp().UniRequest('/twohandbook/bookBill/authority/cutone','GET',body,header)
				
				// vm.totalAmount--
				vm.getData()
			},
			async add(addToCartVo){
				let vm = this
				let header = new Object
				header.Authority = getApp().globalData.Authority
				let body = new Object
				body.redisId = addToCartVo.id
				let res = await getApp().UniRequest('/twohandbook/bookBill/authority/addone','GET',body,header)
				if(res.data.flag == '超过12本'){
					uni.showToast({
						title: '不能超过12本哦',
						duration: 2000
					});
					return
				}
				// vm.totalAmount++
				vm.getData()
			}
		}
	}
</script>

<style scoped>
	@font-face {
	  font-family: 'iconfont';  /* project id 1143282 */
	  src: url('https://at.alicdn.com/t/font_1143282_zy7677qexck.eot');
	  src: url('https://at.alicdn.com/t/font_1143282_zy7677qexck.eot?#iefix') format('embedded-opentype'),
	  url('https://at.alicdn.com/t/font_1143282_zy7677qexck.woff2') format('woff2'),
	  url('https://at.alicdn.com/t/font_1143282_zy7677qexck.woff') format('woff'),
	  url('https://at.alicdn.com/t/font_1143282_zy7677qexck.ttf') format('truetype'),
	  url('https://at.alicdn.com/t/font_1143282_zy7677qexck.svg#iconfont') format('svg');
	}
	
	
	.manage-btn {
		width: 100%;
		height: 75rpx;
		background: #FFFFFF;
		text-align: right;
	}
	
	.manage-btn text {
		font-size: 30rpx;
		color: #76a28c;
		line-height: 75rpx;
		padding: 0 24rpx;
	}
	
	

	.all-sel-btn {
		height: 100%;
		float: left;
	}
	.all-sel-btn .iconfont{
		margin-right: 10rpx;
		color: #76a28c;
	}
	
	.car-list {
		width: 100%;
		padding: 24rpx 24rpx 0 24rpx;
	}
	
	.car-list .list {
		height: 150rpx;
		width: 100%;
		padding: 20rpx 20rpx 20rpx 0;
		display: flex;
		background: #FFFFFF;
		border-radius: 10rpx;
		/* border-bottom: 1px solid #F5F5F5; */
		border-bottom: 1px solid #1E90FF;
	}
	.car-list .list:nth-child(1){
		border-top-left-radius: 0;
		border-top-right-radius: 0;
	}
	.car-list .list:nth-last-child(1){
		margin: 0;
	}
	
	.car-list .list .btn {
		width: 70rpx;
		height: 190rpx;
	}
	.car-list .list .btn .iconfont{
		color: #76a28c;
		font-size: 38rpx;
	}

	.car-list .list .car-img {
		width: 190rpx;
		height: 190rpx;
		border-radius: 10rpx;
	}
	
	.car-list .list .car-mes {
		flex: 1;
		margin-left: 20rpx;
	}
	
	.car-list .g-name {
		font-size: 38rpx;
		font-weight: bold;
		color: #2a2a2a;
		/* height: 38rpx; */
	}
	
	.car-list .mes-box {
		width: 100%;
	}
	
	.car-list .gz-box {
		font-size: 26rpx;
		color: #999999;
		margin: 10rpx 0;
	}
	
	.car-list .mes-box .price {
		color: #ff5621;
		font-weight: bold;
		font-size: 24rpx;
	}
	
	.car-list .mes-box .yj-price {
		font-size: 36rpx;
	}
	
	.car-list .price .num {
		color: #2a2a2a;
		font-size: 28rpx;
		font-weight: normal;
		float: right;
	}
	
	.car-list .num-box {
		float: right;
	}
	
	
	/* .car-list .num-box view {
		width: 60rpx;
		text-align: center;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 30rpx;
		color: #2A2A2A;
		margin: 0 10rpx;
	} */
	
	.price-change-num .price {
		float: left;
	}
	
	.car-bottom-btn {
		position: fixed;
		width: 100%;
		height: 100rpx;
		background: #FFFFFF;
		left: 0;
		bottom: 0;
		z-index: 6;
		box-shadow: 0px -5px 10px -5px #d0d0d0;
		padding: 0 300rpx 0 40rpx;
		display: flex;
		justify-content: space-between;
	}
	.car-bottom-btn .all-cost{
		margin-right: 200rpx;
	}
	.car-bottom-btn .all-cost .icon{
		font-size: 28rpx;
		margin-top: 5rpx;
	}
	.car-bottom-btn text {
		color: #ff5621;
		font-size: 38rpx;
		line-height: 80rpx;
	}
	.car-btn-box{
		position: absolute;
		right: 0;
		height: 100%;
		z-index: 9;
		top: 0;
	}
	.car-btn-box view{
		width: 150rpx;
		height: 100%;
		cursor: pointer;
	}
	.del-btn{
		background: red;
		color: #FFFFFF;
	}
	.js-btn{
		position: fixed;
		width: 180rpx;
		font-size: 40rpx;
		right: 80rpx;
		background: #6495ED;
		border-radius: 30%;
		color: 	#DC143C;
	}
	.shop-mes{
		padding: 20rpx;
		background: #FFFFFF;
		border-bottom: 1px solid #F5F5F5;
	}
	.shop-mes .iconfont{
		font-size: 38rpx;
		margin-right: 20rpx;
		color: #76a28c;
	}
	.shop-mes .name-mes{
		float: left;
	}
	.cut{
		position: absolute;
		right: 150rpx;
		margin-top: -5rpx;
	}
	.amount{
		position: absolute;
		right: 120rpx;
		margin-top: 10rpx;
	}
	.add{
		position: absolute;
		right: 50rpx;
		margin-top: -5rpx;
	}
	.row{
		display: flex;
		flex-direction: row;
	}
	.publisher{
		font-size: 26rpx;
		color: #999999;
		margin: 10rpx 30rpx;
	}
	.condition{
		width: 120rpx;
		height: 50rpx;
		border-radius: 30rpx;
		text-align: center;
		font-size: 26rpx;
		color: #000000;
		position: relative;
		left: 250rpx;
		/* margin: 10rpx 30rpx; */
	}
</style>
